@import "base/reset.less";

div.cwc-pagewrapper{
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
div.cwc-catalog-wrapper{
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform-origin: center center;
  -webkit-transform-origin: center center;
  padding: 70px 55px 125px 15px;
  position: absolute;
  background-color: #fff;
  box-sizing: border-box;
  width: 90%;
  min-height: 550px;
  top: -30px;
  left: 35px;
  >h2{
    letter-spacing: 2em;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
div.cwc-catalog{

  /*这里iscroll样式必有*/
  height: 400px;
  overflow: hidden;
  /*这里iscroll样式必有*/
  padding: 5px 0px 5px 20px;
  border-left: 3px solid #000;
  >ul{
    li{
      >a{
        font-size: 15px;
        display: block;
        padding: 5px 0px;
        &::before{
          content: "#";
        }
        &::after{
          content: "……☆";
        }
      }
    }
  }
}
p.tips{
  font-size: 12px;
  font-family: "microsoft yahei";
}
div.cwc-catalog-back{
  /*background-image: url("../images.src/20150830171141_StN8T.jpeg");
  background-repeat: repeat;*/
  background-color: #eee;
  background-size:200px ;
  height: 866px;
}

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}

.blackbg{
  background-color: #7b7b7b;
}
.dotbg{
  background: #6d6d6d;
  background-image: radial-gradient(white 30%, transparent 0), radial-gradient(white 30%, transparent 0);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.slashbg{
  background: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 25%, #585858 0, #585858 50%);
  background-size: 10px 10px;
}
.speedlinebg{
  background: repeating-linear-gradient(0deg, #ffffff 0, #ffffff 25%, #585858 0, #585858 50%);
  background-size: 10px 10px;
}
.gradientbg{
  background: linear-gradient(#737373 10%, #ececec);
}
.radiationlinebg{
  background-image: url("../images.src/radiation_line.jpg");
  background-size: 100% 100%;
}

div.cwc-mangapage-wrapper {
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 1px 4px rgb(0, 0, 0), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  padding: 20px 20px 20px 20px;
  overflow: hidden;
  div.cell{
    margin-top: 20px;
    position: relative;
    height: 300px;
    &:first-child{
      margin-top: 0px;
    }
  }
}
div.onecell{
  border: 1px solid #000;
  box-sizing: border-box;
}
div.twocolumncell{
  div.firstspreadcell{
    display: inline-block;
    width: 115px;
    height: 100%;
    border: 1px solid #000;
    float: left;
  }
  div.secondspreadcell{
    display: block;
    height: 100%;
    border: 1px solid #000;
    margin-left: 135px;
  }
}

div.tworowcell {
  div.spreadcellwrapper{
    width: 200%;
    height: 100%;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #000;
    position: absolute;
    left: -30%;
    overflow: hidden;
    div.firstspreadcell {
      -webkit-transform: skew(10deg,-10deg);
      transform: skew(10deg,-10deg);
      border-bottom: 1px solid #000;
      height: 300px;
      width: 100%;
      position: absolute;
      top: -200px;
      overflow: hidden;
      >div{
        -webkit-transform: skew(-10deg,10deg);
        transform: skew(-10deg,10deg);
        width: 100%;
        height: 100%;
        top: 200px;
        position: absolute;
      }
    }
    div.secondspreadcell {
      -webkit-transform: skew(10deg,-10deg);
      transform: skew(10deg,-10deg);
      border-top: 1px solid #000;
      height: 300px;
      width: 100%;
      position: absolute;
      top: 126px;
      overflow: hidden;
      >div{
        -webkit-transform: skew(-10deg,10deg);
        transform: skew(-10deg,10deg);
        width: 100%;
        height: 100%;
        top: -126px;
        position: absolute;
      }
    }
  }
}

.manga-words{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  unicode-bidi: bidi-override;
  font-family: "microsoft yahei";
  word-break: break-all;
  word-wrap: break-word;
}

div.dialog{
  /*shape-outside: polygon(5px 10px, 16px 3px, 16px 17px);
  -webkit-clip-path: polygon(5px 10px, 16px 3px, 16px 17px);
  width height bgcolor
  float: left;*/
  .manga-words;
  position: absolute;
  &.story{
    width: 165px;
    overflow: hidden;
    height: 70%;
    border: 1px solid #000;
    padding: 20px;
    top:10px;
    /*padding20+20*/
    right: 60px;
    background-color: #fff;
  }
  &.say{
    background-image: url("../images.src/dialog_say.png");
    width: 270px;
    height: 320px;
    top: -5px;
    left: 45px;
    background-size: 270px;
    >div{
      position: absolute;
      /* padding: 20px; */
      height: 250px;
      right: 115px;
      top: 30px;
      text-align: center;
    }
  }
  &.shout{
    background-image: url("../images.src/dialog_shout.png");
    width: 440px;
    height: 365px;
    top: -45px;
    right: 5px;
    background-size: 440px;
    >div{
      position: absolute;
      /* padding: 20px; */
      height: 250px;
      right: 115px;
      top: 30px;
      text-align: center;
    }
  }
  &.think{
    width: 165px;
    overflow: hidden;
    height: 70%;
    padding: 20px;
    top:10px;
    /*padding20+20*/
    right: 60px;
    background-color: transparent;
    font-weight: bold;
    text-shadow: 0px 0px 5px #fff;
    color: #333333;
  }
  &.daze{
    background-image: url("../images.src/dialog_daze.png");
    width: 290px;
    height: 320px;
    top: -20px;
    right: 0px;
    background-size: 290px;
    left: 0px;
    margin: 0 auto;
    >div{
      position: absolute;
      /* padding: 20px; */
      height: 250px;
      right: 115px;
      top: 35px;
      text-align: center;
    }
  }
}

.cwc-addcellpage{
  font-size: 0px;
  box-sizing: border-box;
  position: fixed;
  left: -10000px;
  top: -1500px;
  width: 100%;
  background-color: #fff;
  z-index: 150;
  -webkit-transition: top 1s;
  -moz-transition: top 1s;
  -ms-transition: top 1s;
  -o-transition: top 1s;
  transition: top 1s;
  overflow: auto;
  >div{
    padding: 20px;
    box-sizing: border-box;
    .cwc-addcelltextarea{
      border: 1px solid #ddd;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
      border-radius: 10px;
      padding: 10px;
      textarea{
        border:none;
        outline: none;
        resize: none;
        width: 100%;
        box-sizing: border-box;
        font-family: "microsoft yahei";
        font-size: 16px;
      }
      >div{
        margin-bottom: 5px;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        ul{
          white-space: nowrap;//不光对文字有效
          overflow: visible;
          /*width: 455px;*/
          li{
            display: inline-block;
            white-space: normal;
            a{
              display: block;
              margin: 3px;
              text-align: center;
              width: 60px;
              overflow: hidden;
              background-color: #eee;
              img{
                height: 60px;
                box-sizing: border-box;
              }
            }
            &.active{
              a{
                box-shadow: 0 1px 3px #00796B;
              }
            }
          }
        }
      }
    }
  }
}


a.long-btn{
  width: 100%;
  border-radius: 10px;
  padding: 10px 0px;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  background-color: #00796B;
  display: block;
  color: #fff;
  font-family: "microsoft yahei";
  letter-spacing: 5px;
  &:hover{
    background-color: #009688;
  }
}